<template>
  <div class="about">
    <h1>up-ui</h1>
    <div class="up-ui-box">
      <button style="padding: 10px; margin: 2px;" @click="show = true">展开overlay的内容</button>
    </div>
    <div class="up-ui-box">
      <button style="padding: 10px; margin: 2px;" @click="show1 = true">展开dialog的内容</button>
    </div>
    <div class="up-ui-box">
      <button style="padding: 10px; margin: 2px;" @click="show2 = true">展开popup插槽 上</button>
      <button style="padding: 10px; margin: 2px;" @click="show3 = true">展开popup插槽 右</button>
      <button style="padding: 10px; margin: 2px;" @click="show4 = true">展开popup插槽 下</button>
      <button style="padding: 10px; margin: 2px;" @click="show5 = true">展开popup插槽 左</button>
      <button style="padding: 10px; margin: 2px;" @click="show6 = true">展开popup插槽 中</button>
    </div>
    <div class="up-ui-box">
      <button style="padding: 10px; margin: 2px;" @click="show1 = true">展开dialog的内容</button>
    </div>
    <div class="up-ui-box">
      <button style="padding: 10px; margin: 2px;" @click="show7 = true">展开cascader级联的内容</button>
    </div>
    <up-overlay v-model:show="show" />
    <up-dialog v-model:show="show1" :is-click="true"></up-dialog>
    <up-popup v-model:show="show2" :is-click="true" :round="false" position="top"></up-popup>
    <up-popup v-model:show="show3" :is-click="true" :round="false" position="right" height="100%" width="30%"></up-popup>
    <up-popup v-model:show="show4" :is-click="true" round position="bottom" :lock-scroll="false"></up-popup>
    <up-popup v-model:show="show5" :is-click="true" :round="false" position="left" height="100%" width="30%"></up-popup>
    <up-popup v-model:show="show6" :is-click="true" round position="center" :bg-click="false" width="200px" height="200px"></up-popup>
    <up-cascader v-model:show="show7" name="tab2"></up-cascader>

    <div class="up-ui-box" style="width: 100%; height: 200px;">
      <up-swipe :show-indicators="false">
        <swipe-item>轮播一</swipe-item>
        <swipe-item>轮播二</swipe-item>
        <swipe-item>3</swipe-item>
        <swipe-item>4</swipe-item>
        <swipe-item>5</swipe-item>
        <swipe-item>6</swipe-item>
      </up-swipe>
    </div>

    <div class="up-ui-box">
      <up-tabs :tabs-name="'tab1'">
        <tabs-item :title="'我的世界'" :name="'0'" :pre-name="'tab1'">
          我的世界1
          <button style="padding: 10px; margin: 2px;" @click="show4 = true">展开popup插槽 下</button>
        </tabs-item>
        <tabs-item :title="'神采飞扬'" :name="'1'" :pre-name="'tab1'">神采飞扬2</tabs-item>
        <tabs-item :title="'一言九鼎'" :name="'2'" :pre-name="'tab1'">一言九鼎3</tabs-item>
        <tabs-item :title="'何足挂齿'" :name="'3'" :pre-name="'tab1'">何足挂齿4</tabs-item>
        <tabs-item :title="'津津有味'" :name="'4'" :pre-name="'tab1'">津津有味5</tabs-item>
        <tabs-item :title="'栩栩如生'" :name="'5'" :pre-name="'tab1'">栩栩如生6</tabs-item>
        <tabs-item :title="'天下无双'" :name="'6'" :pre-name="'tab1'">天下无双7</tabs-item>
      </up-tabs>
    </div>

  </div>
</template>

<script setup>
import UpOverlay from '../components/up-overlay/index.vue'
import UpDialog from '../components/up-dialog/index.vue'
import UpPopup from '../components/up-popup/index.vue'
import UpCascader from '../components/up-cascader/index.vue'
import UpSwipe from '../components/up-swipe/index.vue'
import SwipeItem from '../components/up-swipe/swipe-item.vue'
import UpTabs from '../components/up-tabs/index.vue'
import TabsItem from '../components/up-tabs/tabs-item.vue'
import { ref } from 'vue'
const show = ref(false)
const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const show5 = ref(false)
const show6 = ref(false)
const show7 = ref(false)
const items = [
  {
    src: 'https://picsum.photos/800/600?random=1',
    alt: 'Image 1'
  },
  {
    src: 'https://picsum.photos/800/600?random=2',
    alt: 'Image 2'
  },
  {
    src: 'https://picsum.photos/800/600?random=3',
    alt: 'Image 3'
  },
  {
    src: 'https://picsum.photos/800/600?random=4',
    alt: 'Image 3'
  },
  {
    src: 'https://picsum.photos/800/600?random=5',
    alt: 'Image 3'
  }
]
// 方法
const changeShow = () => {
  show.value = !show.value
}
</script>

<style lang="less" scoped>
.about {
  height: 1800px;
  text-align: left;
}
.up-ui-box {
  margin: 20px 0;
}
</style>
